<template>
  <view>
    <view style="background-color: #F60;position: fixed;left: 0;width: 100%; top:0;z-index: 1;">
      <bar></bar>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center">

        <view class="gui-padding" style="padding-top: 0rpx;padding-right: 5rpx;">
          <text class="gui-icons gui-color-white gui-h6">
            消息-{{connStatus}}
          </text>
        </view>

        <gui-mp-navigation-spacing></gui-mp-navigation-spacing>
      </view>
    </view>

    <view>
      <bar></bar>
      <view style="height: 80rpx;">

      </view>

    </view>

    <view>



      <view class="gui-slide-list-item gui-border-b" @click="itemTap(item)" v-for="(item, index) in msgs" :key="index">
        <view class="gui-flex gui-row gui-nowrap gui-align-items-center">
          <view class="gui-slide-list-img-wrap" hover-class="gui-tap">
            <image :src="item.img" class="gui-slide-list-img" mode="aspectFill"></image>
            <text class="gui-slide-list-point gui-block gui-bg-red gui-color-white"
              v-if="item.msgnumber > 0">{{item.msgnumber}}</text>
          </view>
          <view class="gui-slide-list-content" hover-class="gui-tap">

            <view class="gui-flex gui-row gui-nowrap gui-space-between">
              <text class="gui-slide-list-title-text gui-primary-text gui-block">{{item.title}}</text>
              <text class="gui-slide-list-desc gui-block gui-color-gray ps-space gui-flex-shrink0">{{item.time}}</text>
            </view>
            <text class="gui-slide-list-desc gui-third-text gui-block">{{item.content}}</text>

          </view>

        </view>
      </view>
    </view>








  </view>
</template>

<script>
  // import bar from "@/pages/com/bar";

  export default {
    // components: {
    // 	bar
    // },
    data() {
      return {
        msgs: [],
        pageLoading: false,
        connStatus: '正在连接',
        userInfo: {}
      }
    },
    mounted: function() {

      var user = uni.gRequest.checkLogin(true);
      var self = this;
      if (user) {
        this.userInfo = user;

        //先获取会话列表

        this.initChatList();

        self.initSocket();


      }









    },
    methods: {
      initChatList() {

        var self = this;

        self.msgs = [{
          img: '/static/images/kefu.png',
          msgnumber: 0,
          title: "客服",
          time: "刚刚",
          user_id: '0',
          content: "你有什么问题都可以咨询我"
        }];

        uni.gRequest.get("chat/list", {
          user_id: self.userInfo.user_id
        }).then(result => {

          result.data.forEach(function(x) {
            self.msgs.push({
              img: '/static/images/touxiang.png',
              msgnumber: x.chat_msg_number,
              title: x.user_nickname,
              time: x.chat_time,
              user_id: x.target_id,
              content: x.chat_contont
            });
          });

        })




      },
      initSocket() {

        uni.closeSocket();

        console.log("连接websocket")

        var self = this;

        uni.connectSocket({
          url: uni.gRequest.wss + '?' + this.userInfo.user_id
        });

        uni.onSocketOpen(function(res) {
          console.log('WebSocket连接已打开！');
        });

        uni.onSocketMessage(function(res) {

          console.log("收到消息" + res.data)

          var result = JSON.parse(res.data);

          self.reciveMessage(result);


        });


        uni.$on("reciveList", function() {

          console.log("刷新消息页面收到");

          self.initChatList();


        })
      },
      // 列表本身被点击
      itemTap: function(e) {


        e.msgnumber = 0;

        uni.navigateTo({
          url: '/pages/chat/message?id=' + e.user_id
        })
      },
      reciveMessage(msg) {
        var self = this;
        if (msg.type == "connection") {
          self.connStatus = "在线";
        }
        if (msg.type == "msg") {

          //判断是否存在
          var is_exist = false;
          self.msgs.forEach(x => {
            if (msg.target_id == x.user_id) {
              x.msgnumber++;
              x.content = msg.contont.content
            }
          })

          if (!is_exist) {
            self.initChatList();
          }

          //把消息传递给里面的页面
          uni.$emit("reciveMsg", msg)



        }

      }
    }
  }
</script>

<style>
  .touxiang {
    width: 100rpx;
    height: 100rpx;
    border-radius: 100rpx;
    margin-right: 10rpx;
  }
</style>
